<template>
  <el-header class="header">
    <div class="container header-inner">
      <!-- 左侧：博客名 + 菜单 -->
      <div class="header-left">
        <el-link underline="never" class="logo" @click="$router.push({ name: 'Home' })">宏图士博客</el-link>
        <nav class="nav-links">
          <el-link @click="$router.push({ name: 'Home' })">首页</el-link>
          <el-link @click="$router.push({ name: 'ArticleList' })">文章列表</el-link>
          <el-link @click="$router.push({ name: 'UserCenter' })">用户中心</el-link>
        </nav>
      </div>

      <!-- 右侧：搜索框 -->
      <div class="header-right">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索文章..."
            size="small"
            class="search-input"
            @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button @click="handleSearch">
              <el-icon :size="16">
                <Search/>
              </el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>
  </el-header>
</template>

<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";
import {Search} from '@element-plus/icons-vue';

const searchKeyword = ref('')
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    // router.push({name: 'ArticleList', query: {keyword: searchKeyword.value}})
    // ElMessage.error('功能暂未开发')
    return
  }
  ElMessage.error('功能暂未开发')
}


</script>

<style scoped>

/* Header 样式 */


.header {
  background-color: #d0d0d0;
  height: auto !important;
  background-image: url('@/assets/background.jpg');
}

/* 容器限制宽度 */
.container {
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 内部左右布局 */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  height: 60px;
  margin: 0 auto;
  padding: 0 20px;
}


/* 左侧内容 */
.header-left {
  display: flex;
  align-items: center;
}

/* Logo */
.logo {
  font-weight: bold;
  font-size: 20px;
  margin-left: 20px;
  margin-right: 30px;
}

/* 导航链接 */


.nav-links {
  margin-left: 20px;
}

.el-link {
  margin-right: 8px;
}

/* 右侧搜索 */
.header-right {
  display: flex;
  align-items: center;
  width: 20%;
}
</style>